<template>
	<view>
		<my-topbar :itemNames="['全部订单','支付失败订单','已支付订单']" v-slot="slotProps" :height="100" :font-size="35"
			:beginActiveIndex="activeIndex" :itemPadding="'20rpx 40rpx'" id-prefix="swiper-item">
			<view :id="'swiper-item'+slotProps.index">

				<!-- <keep-alive> -->
				<!-- 第一页 -->
				<view v-if=" slotProps.index===0">

					<view v-if="! loading ||  allOrders.length>0">
						<view v-for="(item,ind) in allOrders" :key="''+item.id+ind">
							<my-order :order="item"></my-order>
						</view>
					</view>
					<!-- <view>hello</view> -->


				</view>

				<!-- 第二页 -->
				<view v-if=" slotProps.index===1">
					<view v-if="! loading ||  unCheckOrders.length>0">
						<view v-for="(item,ind) in unCheckOrders" :key="''+item.id+ind">
							<my-order :order="item"></my-order>
						</view>
					</view>
					<!-- <view>hello</view> -->
				</view>

				<!-- 第三页 -->
				<view v-if=" slotProps.index===2">
					<view v-if="! loading || checkOrders.length>0">
						<view v-for="(item,ind) in checkOrders" :key="''+item.id+ind">
							<my-order :order="item"></my-order>
						</view>
					</view>

					<!-- <view>hello</view> -->
				</view>
				<!-- </keep-alive> -->
			</view>
		</my-topbar>
		<!-- 		<view class="order-nav">
			<uni-nav-bar shadow title="导航栏组件" left-text="选择" right-text="">
				<p>hello</p>
			</uni-nav-bar>
		</view> -->
	</view>
	<view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: true,
				activeIndex: 0,
				// orderList: [],
				allOrders: [],
				unCheckOrders: [],
				checkOrders: [],
			}
		},
		watch: {
			loading(val) {
				// console.log(val);
				// 监听到 goods 变化，触发重新渲染
				if (val === false) {
					// this.$refs.topbar.refresh()
					this.$forceUpdate();
				}
			}
		},
		onLoad(options) {
			this.activeIndex = Number(options.activeId)
			this.getOrders()
			this.checkOrder()
			// console.log("this.allArders1", this.allOrders);

		},
		onReady() {},
		methods: {
			async checkOrder() {
				const orderId = uni.getStorageSync('orderId')
				uni.$dapi.checkOrderAndClear(orderId)
			},
			async getOrders() {
				// this.loading = true;
				const res1 = await uni.$dapi.getAllOrders()
				if (res1) {
					this.allOrders = res1;
				} else this.allOrders = []
				const res2 = await uni.$dapi.getUnCheckOrders()
				if (res2) {
					this.unCheckOrders = res2;
				} else this.unCheckOrders = []

				const res3 = await uni.$dapi.getCheckOrders()
				if (res3) {
					this.checkOrders = res3
				} else this.checkOrders = []

				this.loading = false;
				// this.$refs.topbar.refresh()
				console.log("res1", res1);
				console.log("res2,un", res2);
				console.log("res3,ck", res3);
				// console.log("this.allArders2", this.allOrders);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper-item {

		height: auto;
		width: auto;

		.item {
			display: block;
		}
	}
</style>